<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>创建奖品</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css">
    </link>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: white;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 10px auto;
            padding: 20px;
            background-color: #fff;
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input[type=text],
        .form-group input[type=url] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-group textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn {
            border: none;
            border-radius: 6px;
            cursor: pointer;
            width: 140px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        .prize-row {
            margin-bottom: 10px;
        }

        .container h2 {
            font-weight: 600;
            font-size: 30px;
            letter-spacing: 1px;
            color: #000000;
            line-height: 50px;
            text-align: center;
            margin-bottom: 40px;
        }

        .upload-box {
            display: flex;
            width: 150px;
            height: 150px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px dashed #4c8dfb;
            background-color: #EDF3FE;
            cursor: pointer;
            margin-bottom: 10px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

        .plus {
            color: #4C8DFB;
            font-size: 30px;
        }

        .up-txt {
            font-weight: 400;
            font-size: 14px;
            color: #4C8DFB;
        }

        .upload-box .form-control {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            z-index: 2;
        }

        .preview-img {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: none;
            background-color: #fff;
            object-fit: scale-down;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>开始创建奖品</h2>
        <div id="prizeRows">
            <div class="prize-row">
                <div class="form-group">
                    <label for="prizeName">奖品名称</label>
                    <input class="form-control" type="text" placeholder="请输入奖品名称" id="prizeName" name="prizeName"
                        class="prize-name" required>
                </div>
                <div class="form-group">
                    <label for="prizeName">奖品图片</label>
                    <div class="img-upload">
                        <!-- 上传图片的框 -->
                        <div class="upload-box">
                            <span class="plus">+</span>
                            <span class="up-txt">上传图片</span>
                            <!-- 预览图 -->
                            <img src="./pic/bg.png" class="preview-img" id="previewImg" alt="" srcset="">
                            <input class="form-control" type="file" onchange="showImg()" id="prizeImageUrl">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="price">奖品价格</label>
                    <input class="form-control" placeholder="请输入奖品价格" type="number" id="price" name="price"
                        class="prize-price" required>
                </div>
                <div class="form-group">
                    <label for="description">奖品描述</label>
                    <textarea class="form-control" id="description" placeholder="请输入奖品描述" name="description"
                        class="prize-description" required></textarea>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary" onclick="submitPrizes()">创建奖品</button>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var userToken = localStorage.getItem("user_token");

        var formData = new FormData();
        // 提交奖品数据的函数
        function submitPrizes() {
            var prizeName = $('#prizeName').val();
            var description = $('#description').val();
            var price = $('#price').val();
            formData.append("param", JSON.stringify({
                prizeName: prizeName,
                description: description,
                price: price,
            }));
            // 发送POST请求到后端接口
            $.ajax({
                url: '/prize/create',
                type: 'post',
                // 不设置Content-Type请求头，因为数据将通过其他方式传递，例如通过FormData。
                contentType: false,
                // 不要处理发送的数据
                processData: false,
                data: formData,
                success: function (result) {
                    if (result.code == 200) {
                        alert('奖品创建成功！');
                    } else {
                        alert('创建奖品失败：' + result.msg);
                    }
                },
                error: function (err) {
                    console.log(err);
                    if (err != null && err.status == 401) {
                        alert("用户未登录, 即将跳转到登录页!");
                        // 跳转登录页
                        window.location.href = "/blogin.html";
                        window.parent.location.href = "/blogin.html";//让父页面一起跳转
                    }
                }
            });
        }
        // 上传图片：读取用户通过文件输入选择的图片文件，并将其显示在一个网页元素中
        function showImg() {
            var file = document.getElementById("prizeImageUrl").files[0];
            formData.append("prizePic", file);
            var r = new FileReader();
            result = r.readAsDataURL(file);
            r.onload = function (e) {
                console.log(e)
                $('#previewImg').attr("src", e.target.result).show();
            }
        }

    </script>
</body>

</html>